<template>
  <div class="page-card activity-list-card">
    <div class="card-content">

      <div class="card-item card-task">
        <div class="item-title">
          即将到来和逾期
          <!-- <span class="all-link">全部 <span class="el-icon-arrow-right" /> </span> -->
        </div>
        <div class="activity-content">
          <div v-if="taskList.length<=0" class="no-data" style="height:100px">
            <img src="@/assets/images/no-data.png">
            <span>暂无数据</span>
          </div>
          <div v-for="ts in taskList" :key="ts.id" class="item-row">
            <img class="img" src="@/assets/images/icon-task.png">
            <span class="name">{{ ts.theme }}</span>
            <span class="date">{{ formatTime(ts.createTime) }}</span>
          </div>
        </div>

      </div>
      <div class="card-item card-event">
        <div class="item-title">
          {{ month }} {{ curYear }}
          <!-- <span class="all-link">全部 <span class="el-icon-arrow-right" /> </span> -->
        </div>
        <div class="activity-content">
          <div v-if="eventList.length<=0" class="no-data" style="height:100px">
            <img src="@/assets/images/no-data.png">
            <span>暂无数据</span>
          </div>
          <div v-for="ev in eventList" :key="ev.id" class="item-row">
            <img class="img" src="@/assets/images/icon-event.png">
            <span class="name">{{ ev.theme }}</span>
            <span class="date">{{ formatTime(ev.createTime) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import { getEventList } from '@/api/event'
import { getTaskList } from '@/api/task'
import { formatTime } from '@/utils/tools'
import { getCurMonthChinese } from '@/utils/date'
export default {
  name: 'ActivityCard',
  components: { },
  props: {
    type: {
      type: Number,
      default: 0
    },
    relateid: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      status: '0', // 0 默认  1 task  2 event
      eventList: [],
      taskList: [],
      curYear: '',
      month: getCurMonthChinese()
    }
  },
  mounted() {
    this.getData()
    this.curYear = dayjs(new Date()).format('YYYY')
  },
  methods: {
    formatTime,
    getData() {
      const startDate = dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss')
      getEventList({ currentPage: 1, pageSize: 3, startCreateTime: startDate, relatedId: this.relateid, type: this.type }).then(res => {
        this.eventList = res.records
      })
      getTaskList({ currentPage: 1, pageSize: 3, relatedId: this.relateid, type: this.type }).then(res => {
        this.taskList = res.records
      })
    },
    refresh() {
      console.log('refresh:')
      this.getData()
    }
  }
}
</script>
<style lang="scss" scoped>
.activity-list-card{
  .item-title{
    position: relative;
    border-left: 0px ;
    font-weight:500;
      color:#333333;
      font-size:16px;
    padding-left: 0;
    .all-link{
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
       cursor: pointer;
         &.active{
          color: $--color-primary;
        }
        &:hover{
          color: $--color-primary;

        }
    }
  }

  .card-task{
    border-bottom: 1px solid #e5e5e5;
    padding-top: 0;
      }
   .activity-content{
      padding-bottom: 20px;
      padding-top: 20px;
      .item-row{
        color: $--color-primary;
        position: relative;
        display: flex;
        justify-content: space-between;
        padding-bottom: 20px;
        margin-left: 22px;
        font-size: 14px;
        padding-left: 22px;
        border-left: 1px solid $--color-primary;
        span.date{
          color:#666666;
        }
        .img{
          position: absolute;
          left: -12px;
          top: 0;
          background-color: #fff;
          width: 24px;
          height: 24px;

        }
        &:last-child{
          border-left:none;
          padding-bottom: 0;
        }
        .name{
          cursor: pointer;
          &:hover{
            opacity: 0.9;
          }
        }

      }
    }
}
</style>
